<template>
	<view>
		<view class="container">
			<view class="tui-header">
				<view class="tui-title">加工中心首页</view>
				<view class="tui-sub-title"></view>
			</view>
			<tui-grid>
				<block v-for="(item,index) in routers" :key="index">
					<navigator :url="item.url" hover-class='none'>
						<tui-grid-item :cell="2">
							<view class="tui-grid-icon">
								<image class="tui-grid-img" :src="'https://thorui.cn/images/basic/'+item.img+'.png'" :style="{width:item.width+'rpx',height:item.height+'rpx'}" />
							</view>
							<text class="tui-grid-label">{{item.name}}</text>
						</tui-grid-item>
					</navigator>
				</block>
			</tui-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				routers: [{
									name: '料箱绑定',
									url: '/pages/device/device',
									img: "color",
									width: 74,
									height: 74
								},
								{
									name: '料箱入库',
									url: '/pages/devicestatus/devicestatus',
									img: "flex",
									width: 60,
									height: 60
								},
								{
									name: '绑定工单',
									url: '/pages/bind_wono/bind_wono',
									img: "icon",
									width: 56,
									height: 56
								},
								{
									name: '写卡功能',
									url: '/pages/task/task',
									img: "button",
									width: 64,
									height: 64
								},
								{
									name: '料箱信息',
									url: '/pages/extend/tag/tag',
									img: "tag",
									width: 64,
									height: 64
								},
								{
									name: '栈板料箱入库',
									url: '/pages/extend/badge/badge',
									img: "badge",
									width: 58,
									height: 58
								},
								{
									name: '栈板入库',
									url: '/pages/extend/list/list',
									img: "list",
									width: 64,
									height: 64
								},
								{
									name: '栈板信息',
									url: '/pages/extend/card/card',
									img: "card",
									width: 68,
									height: 68
								},
								{
									name: 'QC重检',
									url: '/pages/extend/grid/grid',
									img: "grid",
									width: 48,
									height: 48
								},
								{
									name: '料箱撤回',
									url: '/pages/extend/loading/loading',
									img: "loading",
									width: 74,
									height: 48
								},
								{
									name: '手工入仓',
									url: '/pages/extend/footer/footer',
									img: "footer",
									width: 64,
									height: 58
								},
								{
									name: '工单领料',
									url: '/pages/material_requisition/material_requisition',
									img: "layout",
									width: 64,
									height: 50
								}
							]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.tui-header {
		padding: 80rpx 60rpx;
	}

	.tui-title {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
	}

	.tui-sub-title {
		font-size: 28rpx;
		color: #7a7a7a;
		padding-top: 18rpx;
	}

	.tui-grid-icon {
		width: 100%;
		height: 74rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-grid-label {
		margin-top: 10rpx;
		display: block;
		text-align: center;
		font-weight: 400;
		color: #333;
		font-size: 28rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
